<template>
  <!-- 2.5 类与样式绑定：工作状态标识 -->
  <div :class="['dashboard', { 'busy-status': isBusy }]">
    <!-- 2.2 模板语法：插值显示 -->
    <h2>{{ lawyer.name }} 的工作台</h2>
    <p>执业领域: {{ lawyer.specialty }}</p>

    <!-- 2.4 计算属性：绩效统计 -->
    <div class="stats-card">
      <p>本月接案量: <strong>{{ caseCount }}</strong></p>
      <p>成功率:
        <span :style="{ color: successRateColor }"> <!-- 2.5 样式绑定 -->
          {{ successRate }}%
        </span>
      </p>
    </div>

    <!-- 2.6 条件渲染：案件状态筛选 -->
    <div class="caseItem-filters">
      <button
          v-for="status in statusOptions"
          :key="status"
          @click="activeStatus = status"
          :class="{ active: activeStatus === status }"
      >
        {{ status }}
      </button>
    </div>

    <!-- 2.7 列表渲染：案件列表 -->
    <ul class="caseItem-list">
      <li
          v-for="caseItem in filteredCases"
          :key="caseItem.id"
          :class="['caseItem-item', `priority-${caseItem.priority}`]"
      >
      <h3>{{ caseItem.title }}</h3>
      <p>当事人: {{ caseItem.client }}</p>
      <p>紧急度:
        <span :class="{
            'high-priority': caseItem.priority > 7,
            'medium-priority': caseItem.priority > 3 && caseItem.priority <= 7
          }">
          {{ caseItem.priority }}/10
          </span>
      </p>

      <!-- 2.6 条件渲染：不同状态的操作按钮 -->
      <div class="actions">
        <button v-if="caseItem.status === '新案件'" @click="acceptCase(caseItem.id)">
          接收案件
        </button>
        <button v-else-if="caseItem.status === '处理中'" @click="openChat(caseItem.client)">
          联系当事人
        </button>
        <span v-else class="status-tag">
            {{ caseItem.status }}
          </span>
      </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

// 2.3 响应式基础：律师数据
const lawyer = reactive({
  name: '张律师',
  specialty: '民事纠纷',
  isOnline: true
});

// 2.3 ref声明状态
const isBusy = ref(false);
const activeStatus = ref('全部');

// 2.4 计算属性：案件统计
const caseCount = computed(() => cases.value.length);
const successRate = computed(() => {
  const successCases = cases.value.filter(c => c.status === '已完成').length;
  return Math.round((successCases / caseCount.value) * 100) || 0;
});
const successRateColor = computed(() =>
    successRate.value > 70 ? '#42b983' : '#e74c3c'
);

// 2.4 计算属性：案件筛选
const filteredCases = computed(() => {
  return activeStatus.value === '全部'
      ? cases.value
      : cases.value.filter(c => c.status === activeStatus.value);
});

// 模拟案件数据
const cases = ref([
  { id: 1, title: '房产继承纠纷', client: '王先生',
    priority: 8, status: '新案件', deadline: '2023-12-31' },
  { id: 2, title: '劳动合同争议', client: '李女士',
    priority: 5, status: '处理中', deadline: '2023-11-15' },
  { id: 3, title: '交通事故赔偿', client: '赵先生',
    priority: 9, status: '新案件', deadline: '2023-12-05' },
  { id: 4, title: '离婚财产分割', client: '陈女士',
    priority: 6, status: '已完成', deadline: '2023-10-20' }
]);

// 状态选项
const statusOptions = ['全部', '新案件', '处理中', '已完成'];

// 2.8 事件处理：案件操作
const acceptCase = (caseId) => {
  const targetCase = cases.value.find(c => c.id === caseId);
  if (targetCase) {
    targetCase.status = '处理中';
    isBusy.value = true;
  }
};

const openChat = (client) => {
  alert(`将与${client}建立联系`);
};
</script>

<style scoped>
/* 2.5 类与样式绑定实现 */
.dashboard {
  padding: 20px;
  border: 1px solid #eee;
  transition: all 0.3s;
}
.busy-status {
  background-color: #fff8e1;
  border-left: 4px solid #ffc107;
}

.stats-card {
  background: #f5f5f5;
  padding: 15px;
  margin: 15px 0;
  border-radius: 8px;
}

.caseItem-item {
  padding: 15px;
  margin: 10px 0;
  border-radius: 4px;
}
.priority-8, .priority-9 {
  border-left: 4px solid #e74c3c; /* 紧急案件标识 */
}
.high-priority { color: #e74c3c; }
.medium-priority { color: #f39c12; }

button.active {
  background: #42b983;
  color: white;
}
</style>